﻿@Code
    ViewBag.Title = "Vincular materias que impartirán los profesores en los grados"
    Dim lstGroupG = CType(ViewBag.ListGroupGrados, IEnumerable(Of SelectListItem))
    Dim lstAños = CType(ViewBag.ListAnios, IEnumerable(Of SelectListItem))
End Code
@Section JSImport
    @MvcHtmlString.Create(Bundle.JavaScript() _
                                .Add("~/Scripts/LinksAjax.js") _
                                .Add("~/Scripts/Funciones/CheckBoxListExtension.js") _
                                .Add("~/Scripts/Funciones/TablaVinculacionMatPrfGrado.js") _
                                .Add("~/Scripts/App/Views/AEscolar/Script_Vinculacion_Materias_Profesores.js") _
                                .ForceRelease _
                                .Render("~/Scripts/JSPage_AE_VMP.js"))
End Section
<div id="contenido">
    <section id="paso-1">
        <h2>Configuración del Año Escolar y el Grupo de Grados</h2>
        <div class="line-titulo"></div>
        <div class="col-titulos" style="width: auto; text-align:left;">
            Seleccione el año escolar donde desea realizar la vinculación:
            <span style= "margin-left:10px;">@Html.DropDownList("lstAnios", lstAños, New With {.class = "combobox-list"})</span>
        </div>
        <div class="col-titulos" style="width: auto; text-align:left;">
            Seleccione el grupo de grados en el cual desea vincular las materias:
            <span style= "margin-left:10px;">@Html.DropDownList("lstGroupG", lstGroupG, "-- Seleccione un grupo de grados --", New With {.class = "combobox-list"})</span>
        </div>
    </section>

    <ul id="paso-2" style="margin-top: 20px; display: none;">
        <li style="width: 380px;">
            <h2>Listado de Grados</h2>
            <div class="line-titulo"></div>
            <div id="loading-panel-1" style="margin-top: 5px;">
                <img src="@Url.Content("~/Content/loading.gif")" alt="Por favor espere..."/>
                <p>Por favor espere un momento...</p>
            </div>
            <div id="listado-grados"></div>
        </li>
        <li style="width: 560px;">
            <h2>Asignación de Profesor a Materia</h2>
            <div class="line-titulo"></div>
            <div id="loading-panel-2" style="margin-top: 5px;">
                <img src="@Url.Content("~/Content/loading.gif")" alt="Por favor espere..."/>
                <p>Por favor espere un momento...</p>
            </div>
            <div id="tabla-prof-mat"></div>
        </li>
    </ul>
    <section id="paso-3" style="margin-top: 20px; display: none;">
        <div style="text-align: center;">
            <span id="loading-save" class="label-loading"><img src="@Url.Content("~/Content/loading.gif")" alt="Por favor espere..." style="height:13px; margin-right:5px; margin-left: 25px;"/>   Intentando guardar todas las asignaciones de Profesor a Materias en los grados seleccionados...</span>
            <span id="response-link-save"></span>
        </div>
        <div id="link-save" style="text-align: center; margin: 8px auto; width: 320px; display:block;">
            <a id="save-all-vinculacion" class="button-link" href="@Url.Action("_SaveAll_Vincul_MatProfGrad","AEscolar")" data-ajax-confirm="¿Esta seguro que desea asignar los profesores a las materias en los grados que ha seleccionado?" data-loading-id="#loading-save" data-ajax-update="#response-link-save" style="display:block;"><span>Guardar todas las asignaciones de profesores</span></a>
        </div>
    </section>
    <section id="paso-4" style="margin-top: 70px; margin-bottom: 50px; display: none;">
        <h2>Tabla de asignaciones actuales</h2>
        <div class="line-titulo"></div>
        <div id="loading-panel-3" style="margin-top: 5px;">
            <img src="@Url.Content("~/Content/loading.gif")" alt="Por favor espere..."/>
            <p>Por favor espere un momento...</p>
        </div>
        <div id="tbl-asig"></div>
    </section>
</div>